<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function()
		{
	
	 $("#add_to_textarea").click(function(){
		 $("#students_staff_emails").append($('input:text[name=selected_email]').val()+";");
		 $('input:text[name=selected_email]').val("");
		 
		 
		 
	 });
		});
		</script>
</head>
<body>
<form action="send_invitation_individuals.action" method="post">
	<table>
		<tr>
			<td>Type email id and click the add button:</td>
			<td><input type="text" name="selected_email"
				list="selected_email" /><input type="button" value="Add to List"
				id="add_to_textarea" /> <datalist id="selected_email">
				<s:iterator value="student_email_ids">
					<option value="<s:property value="email_id"/>">
						<s:property value="student_name" />
					</option>
				</s:iterator> 
				<s:iterator value="staff_email_ids">
					<option value="<s:property value="email_id"/>">
						<s:property value="staff_name" />
					</option>
				</s:iterator> 
				
				
				</datalist></td>


		</tr>

<tr>
<td>Selected Students:</td><td><textarea required="true" rows="3" cols="40" name="students_staff_emails" id="students_staff_emails"></textarea></td>
</tr>
<tr align="center"><td colspan="2"><input type="submit" value="Invite"/></td></tr>

	</table>
</form>

</body>
</html>